import React, {Component} from 'react';
import { Table, Tabs } from 'antd';

const { TabPane } = Tabs;
const { Column, ColumnGroup } = Table;

const url = 'http://127.0.0.1:3000/'

const globalHeight = document.documentElement.clientHeight
const tableHeight = globalHeight - 200
class Home extends Component {
	constructor(props) {
		super(props)
		this.state = {
			manageData: [],
			controlData: []
		}
	}

	componentDidMount() {
		fetch('/data', {
			credentials: 'include'
		}).then((res) => {
			if(res.status !== 200) {
				throw new Error('Load Failed, Status:' + res.status);
			}
			res.json().then(({status, data}) => {
				if(status == 0) {
					console.log('error');
				}

				this.setState({
					manageData: data.manage.map((item, index) => ({
						...item,
						key: index
					})),
					controlData: data.control.map((item, index) => ({
						...item,
						key: index
					})),
				});
			}).catch((error) => {
				console.log(error);
				this.setState({error: "Load Failed"});
			})
			
		}).catch((error) => {
			console.log(error);
			this.setState({error: "Load Failed"});
		});
	}
	
	render() {
		const { manageData, controlData } = this.state
		
		const percentKeys = ['性别','糖尿病','高血压', '尿蛋白', 'CKD']
		const keys = ['年龄','性别','糖尿病','高血压','身高', '体重', 'BMI', '肌酐','尿酸','尿素氮', 
		'GFR', '血红蛋白','白细胞计数','尿蛋白', 'CKD', '随访次数', '随访时长', 'egfrSlopeK', 'scr_1', 'hbAverage', 
		'uaAverage']
		// keys.forEach(k => {
		// 	if(!percentKeys.includes(k)) {
		// 		console.log(k, JSON.stringify(manageData.map(item => item[k])));
		// 		console.log(k, JSON.stringify(controlData.map(item => item[k])));
		// 	}
		// })

		return (
			<div style={{padding: '5px 15px 0'}}>
				<Tabs defaultActiveKey="1">
					<TabPane tab="对照组" key="1">
						<div style={{padding: '0 8px'}}>
							<Table dataSource={controlData} pagination={false} scroll={{ x: 8350, y: tableHeight }}>
								<Column
									width={80}
									title="姓名"
									dataIndex="姓名"
									fixed={true}
								/>
								<Column
									width={60}
									title="序号"
									dataIndex="序号"
								/>
								<Column
									width={60}
									title="年龄"
									dataIndex="年龄"
								/>
								<Column
									width={60}
									title="性别"
									dataIndex="性别"
								/>
								<Column
									width={60}
									title="身高"
									dataIndex="身高"
								/>
								<Column
									width={60}
									title="体重"
									dataIndex="体重"
								/>
								<Column
									width={80}
									title="高血压"
									dataIndex="高血压"
								/>
								<Column
									width={80}
									title="糖尿病"
									dataIndex="糖尿病"
								/>
								<Column
									width={65}
									title="BMI"
									dataIndex="BMI"
								/>
								<Column
									width={100}
									title="RRT"
									dataIndex="RRT"
								/>
								<Column
									width={55}
									title="肌酐"
									dataIndex="肌酐"
								/>
								<Column
									width={60}
									title="尿酸"
									dataIndex="尿酸"
								/>
								<Column
									width={80}
									title="尿素氮"
									dataIndex="尿素氮"
								/>
								<Column
									width={80}
									title="GFR"
									dataIndex="GFR"
								/>
								<Column
									width={90}
									title="血红蛋白"
									dataIndex="血红蛋白"
								/>
								<Column
									width={110}
									title="白细胞计数"
									dataIndex="白细胞计数"
								/>
								<Column
									width={80}
									title="尿蛋白"
									dataIndex="尿蛋白"
								/>
								<Column
									width={80}
									title="CKD"
									dataIndex="CKD"
								/>
								<Column
									width={90}
									title="随访次数"
									dataIndex="随访次数"
								/>
								<Column
									width={90}
									title="随访时长"
									dataIndex="随访时长"
								/>
								<Column
									width={110}
									title="GFR Slope k"
									dataIndex="egfrSlopeK"
								/>
								<Column
									width={115}
									title="GFR Slope b"
									dataIndex="egfrSlopeB"
								/>
								<Column
									width={100}
									title="GFR Latest"
									dataIndex="GFR_Latest"
								/>
								<Column
									width={110}
									title="CKD Latest"
									dataIndex="CKD_Latest"
								/>
								<Column
									width={120}
									title="CKD分期变化"
									dataIndex="CKD_Change"
								/>
								<Column
									width={140}
									title="预计进入透析时间"
									dataIndex="scr_1"
								/>
								<Column
									width={125}
									title="血红蛋白控制值"
									dataIndex="hbAverage"
									render={(text,record) => `${text}${record['hbAverageStd'] == null ? '' : '(' + record['hbAverageStd'] + ')'}`}
								/>
								<Column
									width={120}
									title="尿酸控制值"
									dataIndex="uaAverage"
									render={(text,record) => `${text}(${record['uaAverageStd']})`}
								/>
								<Column
									width={99}
									title="肌酐 Latest"
									dataIndex="肌酐_Latest"
								/>
								<Column
									width={99}
									title="尿酸 Latest"
									dataIndex="尿酸_Latest"
								/>
								<Column
									width={114}
									title="尿素氮 Latest"
									dataIndex="尿素氮_Latest"
								/>
								<Column
									width={130}
									title="血红蛋白 Latest"
									dataIndex="血红蛋白_Latest"
								/>
								<Column
									width={145}
									title="白细胞计数 Latest"
									dataIndex="白细胞计数_Latest"
								/>
								<Column
									width={114}
									title="尿蛋白 Latest"
									dataIndex="尿蛋白_Latest"
								/>
								
								<Column
									width={140}
									title="白细胞计数(平均)"
									dataIndex="白细胞计数(平均)"
								/>
								<Column
									width={140}
									title="红细胞计数(平均)"
									dataIndex="红细胞计数(平均)"
								/>
								<Column
									width={120}
									title="血小板(平均)"
									dataIndex="血小板(平均)"
								/>
								<Column
									width={160}
									title="尿肌酐/尿蛋白(平均)"
									dataIndex="尿肌酐/尿蛋白(平均)"
								/>
								<Column
									width={120}
									title="总胆固醇(平均)"
									dataIndex="总胆固醇(平均)"
								/>
								<Column
									width={120}
									title="甘油三酯(平均)"
									dataIndex="甘油三酯(平均)"
								/>
								<Column
									width={150}
									title="高密度脂蛋白(平均)"
									dataIndex="高密度脂蛋白(平均)"
								/>
								<Column
									width={150}
									title="低密度脂蛋白(平均)"
									dataIndex="低密度脂蛋白(平均)"
								/>
								<Column
									width={110}
									title="总蛋白(平均)"
									dataIndex="总蛋白(平均)"
								/>
								<Column
									width={110}
									title="白蛋白(平均)"
									dataIndex="白蛋白(平均)"
								/>

								<Column
									width={100}
									title="血糖(平均)"
									dataIndex="血糖(平均)"
								/>
								<Column
									width={110}
									title="收缩压(平均)"
									dataIndex="收缩压(平均)"
								/>
								<Column
									width={110}
									title="舒张压(平均)"
									dataIndex="舒张压(平均)"
								/>
								<Column
									width={110}
									title="GFR(平均)"
									dataIndex="GFR(平均)"
								/>

<Column
									width={140}
									title="白细胞计数(初次)"
									dataIndex="白细胞计数(初次)"
								/>
								<Column
									width={140}
									title="红细胞计数(初次)"
									dataIndex="红细胞计数(初次)"
								/>
								<Column
									width={120}
									title="血小板(初次)"
									dataIndex="血小板(初次)"
								/>
								<Column
									width={160}
									title="尿肌酐/尿蛋白(初次)"
									dataIndex="尿肌酐/尿蛋白(初次)"
								/>
								<Column
									width={120}
									title="总胆固醇(初次)"
									dataIndex="总胆固醇(初次)"
								/>
								<Column
									width={120}
									title="甘油三酯(初次)"
									dataIndex="甘油三酯(初次)"
								/>
								<Column
									width={150}
									title="高密度脂蛋白(初次)"
									dataIndex="高密度脂蛋白(初次)"
								/>
								<Column
									width={150}
									title="低密度脂蛋白(初次)"
									dataIndex="低密度脂蛋白(初次)"
								/>
								<Column
									width={110}
									title="总蛋白(初次)"
									dataIndex="总蛋白(初次)"
								/>
								<Column
									width={110}
									title="白蛋白(初次)"
									dataIndex="白蛋白(初次)"
								/>

								<Column
									width={100}
									title="血糖(初次)"
									dataIndex="血糖(初次)"
								/>
								<Column
									width={110}
									title="收缩压(初次)"
									dataIndex="收缩压(初次)"
								/>
								<Column
									width={110}
									title="舒张压(初次)"
									dataIndex="舒张压(初次)"
								/>
								<Column
									width={110}
									title="GFR(初次)"
									dataIndex="GFR(初次)"
								/>


								<Column
									width={140}
									title="白细胞计数(末次)"
									dataIndex="白细胞计数(末次)"
								/>
								<Column
									width={140}
									title="红细胞计数(末次)"
									dataIndex="红细胞计数(末次)"
								/>
								<Column
									width={120}
									title="血小板(末次)"
									dataIndex="血小板(末次)"
								/>
								<Column
									width={160}
									title="尿肌酐/尿蛋白(末次)"
									dataIndex="尿肌酐/尿蛋白(末次)"
								/>
								<Column
									width={120}
									title="总胆固醇(末次)"
									dataIndex="总胆固醇(末次)"
								/>
								<Column
									width={120}
									title="甘油三酯(末次)"
									dataIndex="甘油三酯(末次)"
								/>
								<Column
									width={150}
									title="高密度脂蛋白(末次)"
									dataIndex="高密度脂蛋白(末次)"
								/>
								<Column
									width={150}
									title="低密度脂蛋白(末次)"
									dataIndex="低密度脂蛋白(末次)"
								/>
								<Column
									width={110}
									title="总蛋白(末次)"
									dataIndex="总蛋白(末次)"
								/>
								<Column
									width={110}
									title="白蛋白(末次)"
									dataIndex="白蛋白(末次)"
								/>

								<Column
									width={100}
									title="血糖(末次)"
									dataIndex="血糖(末次)"
								/>
								<Column
									width={110}
									title="收缩压(末次)"
									dataIndex="收缩压(末次)"
								/>
								<Column
									width={110}
									title="舒张压(末次)"
									dataIndex="舒张压(末次)"
								/>
								<Column
									width={110}
									title="GFR(末次)"
									dataIndex="GFR(末次)"
								/>
							</Table>
						</div>
					</TabPane>
					<TabPane tab="管理组" key="2">
						<div style={{padding: '0 8px'}}>
							<Table dataSource={manageData} pagination={false} scroll={{ x: 8360, y: tableHeight }}>
								<Column
									width={80}
									title="姓名"
									dataIndex="姓名"
									fixed={true}
								/>
								<Column
									width={95}
									title="序号"
									dataIndex="序号"
								/>
								<Column
									width={60}
									title="年龄"
									dataIndex="年龄"
								/>
								<Column
									width={60}
									title="性别"
									dataIndex="性别"
								/>
								<Column
									width={60}
									title="身高"
									dataIndex="身高"
								/>
								<Column
									width={60}
									title="体重"
									dataIndex="体重"
								/>
								<Column
									width={80}
									title="高血压"
									dataIndex="高血压"
								/>
								<Column
									width={80}
									title="糖尿病"
									dataIndex="糖尿病"
								/>
								<Column
									width={65}
									title="BMI"
									dataIndex="BMI"
								/>
								<Column
									width={60}
									title="肌酐"
									dataIndex="肌酐"
								/>
								<Column
									width={65}
									title="尿酸"
									dataIndex="尿酸"
								/>
								<Column
									width={80}
									title="尿素氮"
									dataIndex="尿素氮"
								/>
								<Column
									width={80}
									title="GFR"
									dataIndex="GFR"
								/>
								<Column
									width={90}
									title="血红蛋白"
									dataIndex="血红蛋白"
								/>
								<Column
									width={110}
									title="白细胞计数"
									dataIndex="白细胞计数"
								/>
								<Column
									width={80}
									title="尿蛋白"
									dataIndex="尿蛋白"
								/>
								<Column
									width={80}
									title="CKD"
									dataIndex="CKD"
								/>
								<Column
									width={90}
									title="随访次数"
									dataIndex="随访次数"
								/>
								<Column
									width={90}
									title="随访时长"
									dataIndex="随访时长"
								/>
								<Column
									width={110}
									title="GFR Slope k"
									dataIndex="egfrSlopeK"
								/>
								<Column
									width={110}
									title="GFR Slope b"
									dataIndex="egfrSlopeB"
								/>
								<Column
									width={100}
									title="GFR Latest"
									dataIndex="GFR_Latest"
								/>
								<Column
									width={100}
									title="CKD Latest"
									dataIndex="CKD_Latest"
								/>
								<Column
									width={110}
									title="CKD分期变化"
									dataIndex="CKD_Change"
								/>
								<Column
									width={140}
									title="预计进入透析时间"
									dataIndex="scr_1"
								/>
								<Column
									width={125}
									title="血红蛋白控制值"
									dataIndex="hbAverage"
									render={(text,record) => `${text}(${record['hbAverageStd']})`}
								/>
								<Column
									width={120}
									title="尿酸控制值"
									dataIndex="uaAverage"
									render={(text,record) => `${text}(${record['uaAverageStd']})`}
								/>
								<Column
									width={97}
									title="肌酐 Latest"
									dataIndex="肌酐_Latest"
								/>
								<Column
									width={97}
									title="尿酸 Latest"
									dataIndex="尿酸_Latest"
								/>
								<Column
									width={111}
									title="尿素氮 Latest"
									dataIndex="尿素氮_Latest"
								/>
								<Column
									width={125}
									title="血红蛋白 Latest"
									dataIndex="血红蛋白_Latest"
								/>
								<Column
									width={140}
									title="白细胞计数 Latest"
									dataIndex="白细胞计数_Latest"
								/>
								<Column
									width={109}
									title="尿蛋白 Latest"
									dataIndex="尿蛋白_Latest"
								/>

								<Column
									width={140}
									title="白细胞计数(平均)"
									dataIndex="白细胞计数(平均)"
								/>
								<Column
									width={140}
									title="红细胞计数(平均)"
									dataIndex="红细胞计数(平均)"
								/>
								<Column
									width={120}
									title="血小板(平均)"
									dataIndex="血小板(平均)"
								/>
								<Column
									width={160}
									title="尿肌酐/尿蛋白(平均)"
									dataIndex="尿肌酐/尿蛋白(平均)"
								/>
								<Column
									width={120}
									title="总胆固醇(平均)"
									dataIndex="总胆固醇(平均)"
								/>
								<Column
									width={120}
									title="甘油三酯(平均)"
									dataIndex="甘油三酯(平均)"
								/>
								<Column
									width={150}
									title="高密度脂蛋白(平均)"
									dataIndex="高密度脂蛋白(平均)"
								/>
								<Column
									width={150}
									title="低密度脂蛋白(平均)"
									dataIndex="低密度脂蛋白(平均)"
								/>
								<Column
									width={110}
									title="总蛋白(平均)"
									dataIndex="总蛋白(平均)"
								/>
								<Column
									width={110}
									title="白蛋白(平均)"
									dataIndex="白蛋白(平均)"
								/>

								<Column
									width={100}
									title="血糖(平均)"
									dataIndex="血糖(平均)"
								/>
								<Column
									width={110}
									title="收缩压(平均)"
									dataIndex="收缩压(平均)"
								/>
								<Column
									width={110}
									title="舒张压(平均)"
									dataIndex="舒张压(平均)"
								/>
								<Column
									width={110}
									title="GFR(平均)"
									dataIndex="GFR(平均)"
								/>

								<Column
									width={140}
									title="白细胞计数(初次)"
									dataIndex="白细胞计数(初次)"
								/>
								<Column
									width={140}
									title="红细胞计数(初次)"
									dataIndex="红细胞计数(初次)"
								/>
								<Column
									width={120}
									title="血小板(初次)"
									dataIndex="血小板(初次)"
								/>
								<Column
									width={160}
									title="尿肌酐/尿蛋白(初次)"
									dataIndex="尿肌酐/尿蛋白(初次)"
								/>
								<Column
									width={120}
									title="总胆固醇(初次)"
									dataIndex="总胆固醇(初次)"
								/>
								<Column
									width={120}
									title="甘油三酯(初次)"
									dataIndex="甘油三酯(初次)"
								/>
								<Column
									width={150}
									title="高密度脂蛋白(初次)"
									dataIndex="高密度脂蛋白(初次)"
								/>
								<Column
									width={150}
									title="低密度脂蛋白(初次)"
									dataIndex="低密度脂蛋白(初次)"
								/>
								<Column
									width={110}
									title="总蛋白(初次)"
									dataIndex="总蛋白(初次)"
								/>
								<Column
									width={110}
									title="白蛋白(初次)"
									dataIndex="白蛋白(初次)"
								/>

								<Column
									width={100}
									title="血糖(初次)"
									dataIndex="血糖(初次)"
								/>
								<Column
									width={110}
									title="收缩压(初次)"
									dataIndex="收缩压(初次)"
								/>
								<Column
									width={110}
									title="舒张压(初次)"
									dataIndex="舒张压(初次)"
								/>
								<Column
									width={110}
									title="GFR(初次)"
									dataIndex="GFR(初次)"
								/>


								<Column
									width={140}
									title="白细胞计数(末次)"
									dataIndex="白细胞计数(末次)"
								/>
								<Column
									width={140}
									title="红细胞计数(末次)"
									dataIndex="红细胞计数(末次)"
								/>
								<Column
									width={120}
									title="血小板(末次)"
									dataIndex="血小板(末次)"
								/>
								<Column
									width={160}
									title="尿肌酐/尿蛋白(末次)"
									dataIndex="尿肌酐/尿蛋白(末次)"
								/>
								<Column
									width={120}
									title="总胆固醇(末次)"
									dataIndex="总胆固醇(末次)"
								/>
								<Column
									width={120}
									title="甘油三酯(末次)"
									dataIndex="甘油三酯(末次)"
								/>
								<Column
									width={150}
									title="高密度脂蛋白(末次)"
									dataIndex="高密度脂蛋白(末次)"
								/>
								<Column
									width={150}
									title="低密度脂蛋白(末次)"
									dataIndex="低密度脂蛋白(末次)"
								/>
								<Column
									width={110}
									title="总蛋白(末次)"
									dataIndex="总蛋白(末次)"
								/>
								<Column
									width={110}
									title="白蛋白(末次)"
									dataIndex="白蛋白(末次)"
								/>

								<Column
									width={100}
									title="血糖(末次)"
									dataIndex="血糖(末次)"
								/>
								<Column
									width={110}
									title="收缩压(末次)"
									dataIndex="收缩压(末次)"
								/>
								<Column
									width={110}
									title="舒张压(末次)"
									dataIndex="舒张压(末次)"
								/>
								<Column
									width={110}
									title="GFR(末次)"
									dataIndex="GFR(末次)"
								/>
							</Table>
						</div>
					</TabPane>
				</Tabs>
			</div>
		)
	}
}

export default Home;